import React, { createElement, createContext, useState, useContext, type PropsWithChildren } from "react";
import { ThemeProvider, useTheme, type AntdTheme } from 'antd-style';
import type { AntProLayoutProps, ITheme as ProTableTheme } from "@yaf/pro-ui";
import { antDarkToken } from "./baseToken";

// 通过给 antd-style 扩展 CustomToken 对象类型定义，可以为 useTheme 中增加相应的 token 对象
declare module 'antd-style' {
  type CustomThemeToken = CustomThemeConfig["customThemeToken"];

  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface CustomToken extends CustomThemeToken { }
}

type CustomThemeAppearance = "light" | "dark" | "navyBlue" | string;

interface CustomThemeConfig {
  rewriteAntdToken?: Partial<AntdTheme>,
  customThemeToken?: {
    custom: {
      bodyBgColor?: string, //  body背景颜色
    }
    antProLayoutToken: AntProLayoutProps["token"],
    proTableToken: ProTableTheme,
  }  
}

const themeList = [
  {label:"浅色系", value: "light"},
  {label:"深蓝系", value: "navyBlue"},
  {label:"深色系", value: "dark"},
];

const ThemeCtx = createContext<{
  themeAppearance?: string, 
  setThemeAppearance?: (value: CustomThemeAppearance) => void,
  themeList?: {label: string, value: CustomThemeAppearance}[]
}>({})

/**
 * 主题token hook
 */
export const useThemeToken = () => {
  const { themeAppearance, setThemeAppearance } = useContext(ThemeCtx);
  const themeToken = useTheme();
  return { themeToken, themeList, themeAppearance, setThemeAppearance }
}


export const ThemeConfigProvider: React.FC<PropsWithChildren> = (props) => {
  const [themeAppearance,setThemeAppearance] = useState<CustomThemeAppearance>("light");
  const commonAntdToken:Partial<AntdTheme> = {
    fontSize: 14,
  };

  return createElement(ThemeCtx.Provider, {value: {themeAppearance,setThemeAppearance},}, createElement(ThemeProvider, {
    appearance: themeAppearance,  // light, dark, navyBlue
    theme: (appearance) => {
      switch(appearance){
        // 定义浅色系主题
        case "light":
          return { 
            token: {
              ...commonAntdToken,
              ...lightToken.rewriteAntdToken,
            },
            components:{}
          }

        // 定义深蓝系主题
        case "navyBlue":
          return { 
            token: {
              ...commonAntdToken,
              ...antDarkToken,
              ...navyBlueToken.rewriteAntdToken
            },
            components:{
              Segmented:{
                trackBg: navyBlueToken.rewriteAntdToken.colorPrimaryBg,
              }
            }
          }

        // 定义深色系主题
        case "dark":
          return { 
            token: {
              ...commonAntdToken,
              ...darkToken.rewriteAntdToken
            },
            components:{}
          }
      }
    },
    customToken: ({appearance}) => {
      switch(appearance){
        // 定义浅色系主题
        case "light":
          return lightToken.customThemeToken

        // 定义深蓝系主题
        case "navyBlue":
          return navyBlueToken.customThemeToken

        // 定义深色系主题
        case "dark":
          return darkToken.customThemeToken
      }
    },
    ...props,
  }))
}

/**
 * 默认颜色
 */
const lightToken: CustomThemeConfig = (() => {
  // 1.重写pro-layout组件中的token
  const activeBgColor = "#1b8ce7";
  const antProLayoutToken: AntProLayoutProps["token"] = {
    header: {
      colorTextMenuSelected: '#fff',
      colorBgMenuItemSelected: activeBgColor,
      colorBgRightActionsItemHover: "rgba(0,0,0,0)",
    },
    sider: {
      colorTextMenuSelected: '#dfdfdf',
      colorBgMenuItemSelected: activeBgColor,
    },
  }

  // 4. pro-table组件托乎提
  const proTableToken: ProTableTheme = {
    headerHeight: 40,
    footerHeight: 40,
    headerBgColor: "#fafafa",
    headerBoxShadow: "0px 1px 3px #333333",
    footerBgColor: "#fafafa",
    footerBoxShadow: "0px 1px 3px #333333",
  }

  return {
    appearance: "light",
    customThemeToken: {
      custom: {},
      antProLayoutToken,
      proTableToken,
    }
  };
})();

/**
 * 深蓝色系列
 */
const navyBlueToken: CustomThemeConfig = (() => {
  // 1. 自定义theme token
  const customToken: CustomThemeConfig["customThemeToken"]["custom"] = {
    bodyBgColor: "#38476e", //  body背景颜色
  }

  // 2.重写pro-layout组件中的token
  const bgColor = "#243d5d";
  const activeBgColor = "#1b8ce7";
  const antProLayoutToken: AntProLayoutProps["token"] = {
    header: {
      colorBgHeader: bgColor,
      colorHeaderTitle: '#fff',
      colorTextMenu: '#dfdfdf',
      colorTextMenuSecondary: '#dfdfdf',
      colorTextMenuSelected: '#fff',
      colorBgMenuItemSelected: activeBgColor,
      colorTextMenuActive: 'rgba(255,255,255,0.85)',
      colorTextRightActionsItem: '#dfdfdf',
      colorBgMenuItemHover: customToken.bodyBgColor,
      colorBgRightActionsItemHover: "rgba(0,0,0,0)",
    },
    colorTextAppListIconHover: '#fff',
    colorTextAppListIcon: '#dfdfdf',
    sider: {
      /* 折叠标识相关的颜色*/
      colorBgCollapsedButton: "#39649b",
      colorTextCollapsedButtonHover: "#fff",
      colorTextCollapsedButton: "#242424",
      colorMenuBackground: bgColor,
      colorMenuItemDivider: '#dfdfdf',
      colorBgMenuItemHover: customToken.bodyBgColor,
      colorTextMenu: '#fff',
      colorTextMenuSelected: '#dfdfdf',
      colorTextMenuActive: "#dfdfdf",
      colorBgMenuItemSelected: activeBgColor,

      /**
       * menu 顶部 title 的字体颜色
       */
      colorTextMenuTitle: "#fff",
      colorTextSubMenuSelected: "#fff",
    },
    bgLayout: customToken.bodyBgColor, // layout背景颜色
  }

  // 3. pro-table组件托乎提
  const proTableToken = {
    headerHeight: 40,
    footerHeight: 40,
    headerBgColor: bgColor,
    headerBoxShadow: "0px 1px 3px #333333",
    footerBgColor: bgColor,
    footerBoxShadow: "0px 1px 3px #333333",
  }

  return {
    // 重写antd中定义的token主题色
    appearance: "dark",
    rewriteAntdToken: {
      // **************** 品牌色 ****************
      colorPrimaryBg: "#2a3850",          // 浅色背景色

      // **************** 中性色 ****************
      // 描边
      colorBorder: "#314f72",            // 边框色
      colorBorderSecondary: "#314f72",   // 二级边框色

      // 背景
      colorBgContainer: "#243d5d",    // 组件容器背景色
      colorBgElevated: "#243d5d",     // 浮层容器背景色
    },
    customThemeToken: {
      custom: customToken,
      antProLayoutToken,
      proTableToken,
    }
  };
})();

/**
 * 暗黑色系列
 */
const darkToken: CustomThemeConfig = (() => {
  // 1. 自定义theme token
  const customToken: CustomThemeConfig["customThemeToken"]["custom"] = {
    bodyBgColor: "#232222", //  body背景颜色
  }

  // 2.重写pro-layout组件中的token
  const bgColor = "#141414";
  const activeBgColor = "#1b8ce7";
  const antProLayoutToken: AntProLayoutProps["token"] = {
    header: {
      colorBgHeader: bgColor,
      colorHeaderTitle: '#fff',
      colorTextMenu: '#dfdfdf',
      colorTextMenuSecondary: '#dfdfdf',
      colorTextMenuSelected: '#fff',
      colorBgMenuItemSelected: activeBgColor,
      colorTextMenuActive: 'rgba(255,255,255,0.85)',
      colorTextRightActionsItem: '#dfdfdf',
      colorBgMenuItemHover:customToken.bodyBgColor,
      colorBgRightActionsItemHover: "rgba(0,0,0,0)",
    },
    colorTextAppListIconHover: '#fff',
    colorTextAppListIcon: '#dfdfdf',
    sider: {
      /* 折叠标识相关的颜色*/
      colorBgCollapsedButton: "#39649b",
      colorTextCollapsedButtonHover: "#fff",
      colorTextCollapsedButton: "#242424",
      colorMenuBackground: bgColor,
      colorMenuItemDivider: '#dfdfdf',
      colorBgMenuItemHover: customToken.bodyBgColor,
      colorTextMenu: '#fff',
      colorTextMenuSelected: '#dfdfdf',
      colorTextMenuActive: "#dfdfdf",
      colorBgMenuItemSelected: activeBgColor,
      /**
       * menu 顶部 title 的字体颜色
       */
      colorTextMenuTitle: "#fff",
      colorTextSubMenuSelected: "#fff",
    },
    bgLayout: customToken.bodyBgColor, // layout背景颜色
  }

  // 3. pro-table组件托乎提
  const proTableToken = {
    headerHeight: 40,
    footerHeight: 40,
    headerBgColor: bgColor,
    headerBoxShadow: "0px 1px 3px #333333",
    footerBgColor: bgColor,
    footerBoxShadow: "0px 1px 3px #333333",
  }

  return {
    appearance:"dark",
    customThemeToken: {
      custom: customToken,
      antProLayoutToken,
      proTableToken,
    }
  };
})();










